<template>
  <el-dialog
    class="outDialog"
    v-model="props.outVisible"
    title="审核通过-出库"
    :close-on-click-modal="false"
    :show-close="false"
    width="35%"
  >
    <div class="box" v-for="(item, index) in ruleForm">
      <el-row class="row">
        <el-col :span="6">
          <div class="partName">{{ index + 1 }}、{{ item.partName }}</div>
        </el-col>
        <el-col :span="6">
          <div>申请库存：{{ item.applyAmount }}</div>
        </el-col>
        <el-col :span="6">
          <div>当前实际库存：{{ item.realStock }}</div>
        </el-col>
      </el-row>
      <el-form
        ref="ruleFormRef"
        :model="item"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item style="width: 100%" v-for="(e, i) in item.detailRequests">
          <el-row>
            <el-col :span="11">
              <el-form-item
                label="出库批次"
                :prop="`detailRequests[${i}].batchId`"
                :rules="{
                  required: true,
                  message: '请选择出库批次',
                  trigger: 'change'
                }"
              >
                <el-select
                  v-model="e.batchId"
                  class="m-2"
                  placeholder="选择出库批次"
                  @focus="getBatchArr(item.partId)"
                  @change="batchChange(e.batchId, index, i)"
                >
                  <el-option
                    v-for="ob in outBatch"
                    :key="ob.id"
                    :label="ob.batchNum + '-' + ob.expireDate"
                    :value="ob.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="出库数量"
                :prop="`detailRequests[${i}].amount`"
                :rules="{
                  required: true,
                  message: '请输入出库数量',
                  trigger: 'blur'
                }"
              >
                <el-input
                  v-model="e.amount"
                  autocomplete="off"
                  placeholder="请输入出库数量"
                />
                <div v-if="e.batchId != ''">库存数量：{{ e.stock }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="2" v-if="item.detailRequests.length > 1">
              <svg
                @click="del(e, index)"
                t="1677136520546"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3250"
                width="20"
                height="32"
              >
                <path
                  d="M832 977.066667h8.533333s4.266667 0 8.533334-4.266667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266666-4.266667 4.266667-4.266667c0-4.266667 0-4.266667 4.266667-8.533333s0-4.266667 0-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666-4.266667 0-4.266667-4.266667-4.266667-4.266667s-4.266667-4.266667-8.533333-4.266667H183.466667h-8.533334c0 4.266667 0 4.266667-4.266666 8.533334-4.266667 0-4.266667 4.266667-4.266667 4.266666l-4.266667 4.266667s-4.266667 4.266667-4.266666 8.533333V960l4.266666 4.266667c0 4.266667 4.266667 4.266667 4.266667 4.266666l4.266667 4.266667s4.266667 4.266667 8.533333 4.266667 4.266667 0 8.533333 4.266666h644.266667zM230.4 900.266667V251.733333h563.2v648.533334H230.4z"
                  fill="#FA4016"
                  p-id="3251"
                ></path>
                <path
                  d="M388.266667 704v17.066667c0 4.266667 4.266667 4.266667 4.266666 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266667 4.266666 4.266667 0 4.266667 4.266667 8.533333 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533334-4.266667 4.266667 0 4.266667-4.266667 4.266666-4.266666l4.266667-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-34.133333c-4.266667 0-4.266667 4.266667-8.533333 4.266666l-4.266667 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666 8.533333v294.4zM631.466667 721.066667v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-8.533333-21.333333c-4.266667 0-4.266667 4.266667-8.533334 4.266666l-4.266666 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 8.533333V721.066667c0 4.266667 4.266667 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266666 4.266667 0 4.266667 4.266667 8.533334 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266667-4.266667v-8.533333zM46.933333 221.866667v8.533333c0 4.266667 0 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266667s4.266667 4.266667 8.533334 4.266666 4.266667 0 8.533333 4.266667h870.4c4.266667 0 4.266667 0 8.533333-4.266667l4.266667-4.266666c4.266667 0 4.266667-4.266667 4.266667-4.266667l4.266666-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333s0-4.266667 4.266667-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666l-4.266667-4.266667-4.266667-4.266667H68.266667c-4.266667 0-4.266667 4.266667-8.533334 4.266667s0 4.266667 0 8.533333l-4.266666 4.266667s-4.266667 4.266667-4.266667 8.533333v17.066667c-4.266667 0-4.266667 0-4.266667 4.266667z"
                  fill="#FA4016"
                  p-id="3252"
                ></path>
                <path
                  d="M384 59.733333c-4.266667 0-4.266667 4.266667-8.533333 8.533334l-68.266667 128s-4.266667 4.266667-4.266667 8.533333v21.333333c0 4.266667 0 4.266667 4.266667 8.533334l4.266667 4.266666c0 4.266667 4.266667 4.266667 4.266666 4.266667l4.266667 4.266667c4.266667 4.266667 12.8 4.266667 17.066667 4.266666h349.866666c4.266667 0 4.266667 0 8.533334-4.266666 4.266667 0 4.266667-4.266667 4.266666-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 0-4.266667 4.266667-4.266667 4.266667-4.266666 0-4.266667 4.266667-4.266667 4.266666-8.533334 0 0 0-4.266667 4.266667-8.533333v-8.533333c0-8.533333 0-12.8-4.266667-17.066667l-68.266666-128c0-4.266667-4.266667-4.266667-4.266667-8.533333l-8.533333-8.533334c-4.266667 0-4.266667-4.266667-8.533334-4.266666h-213.333333c0 4.266667-4.266667 4.266667-8.533333 4.266666s-8.533333 0-8.533334 4.266667c-4.266667 4.266667-8.533333 4.266667-8.533333 8.533333z m51.2 64h157.866667l25.6 51.2h-213.333334l29.866667-51.2z"
                  fill="#FA4016"
                  p-id="3253"
                ></path>
              </svg>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div style="margin-top: 15px">
        <el-button type="primary" @click="add(item, index)"
          >添加出库批次</el-button
        >
      </div>
    </div>
    <div style="text-align: right">
      <el-button @click="cancel(ruleFormRef)"> 取消 </el-button>
      <el-button type="primary" @click="submit(ruleFormRef)" :loading="loading"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormLabelWidthContext } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import {
  auditPartApplyApi,
  auditPartApplyDetailApi,
  getBatchApi
} from '/@/api/spare'
const props = defineProps({
  outVisible: Boolean,
  outForm: Object
})
const emit = defineEmits(['cancelOut', 'submitOut'])
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const outBatch = ref<any>([])
const ruleForm = ref<any>([
  {
    partName: '',
    partId: '',
    applyAmount: '',
    realStock: '',
    price: '',
    detailRequests: [
      {
        partId: '',
        batchId: '',
        amount: '',
        stock: 0
      }
    ]
  }
])
const cancel = (formEl: any) => {
  if (!formEl) return
  formEl.forEach((t: any) => {
    t.resetFields()
  })

  emit('cancelOut')
}
const formSize = ref('default')

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (props.outForm?.type == '1') {
    let params = {
      applyId: props.outForm?.id,
      auditResult: 3,
      reason: '',
      detailRequests: <any>[]
    }
    ruleForm.value.forEach((i: any) => {
      i.detailRequests.forEach((item: any) => {
        params.detailRequests.push(item)
      })
    })
    auditPartApplyApi(params).then((res) => {
      if (res.code == 0) {
        ElMessage({
          type: 'success',
          message: '出库成功'
        })
        loading.value = false
        emit('submitOut')
      }
    })
    loading.value = false
  } else {
    let params = {
      applyDetailId: props.outForm?.id,
      auditResult: 3,
      reason: '',
      detailRequests: <any>[]
    }
    ruleForm.value.forEach((i: any) => {
      i.detailRequests.forEach((item: any) => {
        params.detailRequests.push(item)
      })
    })
    auditPartApplyDetailApi(params).then((res) => {
      if (res.code == 0) {
        ElMessage({
          type: 'success',
          message: '出库成功'
        })
        emit('submitOut')
        loading.value = false
      }
    })
    loading.value = false
  }
}

const getBatchArr = (id: any) => {
  getBatchApi(id, 1).then((res) => {
    outBatch.value = res.data
  })
}

const batchChange = (val: any, index: any, i: any) => {
  outBatch.value.forEach((item: any) => {
    if (item.id == val) {
      ruleForm.value[index].detailRequests[i].stock = item.stockAmount - 0
    }
  })
}

const add = (e: any, i: any) => {
  ruleForm.value[i].detailRequests.push({
    partId: e.partId,
    batchId: '',
    amount: '',
    stock: 0
  })
}
const del = (e: any, i: any) => {
  var index = ruleForm.value[i].detailRequests.indexOf(e)
  if (index !== -1) {
    ruleForm.value[i].detailRequests.splice(index, 1)
  }
}

watch(
  () => props.outVisible,
  () => {
    if (props.outVisible == true) {
      ruleForm.value = []
      props.outForm?.form.forEach((item: any, index: any) => {
        let obj = {
          partName: item.partName,
          partId: item.partId,
          applyAmount: item.applyAmount != '' ? item.applyAmount : item.amount,
          realStock: item.realStock,
          price: item.price,
          detailRequests: <any>[]
        }
        getBatchArr(item.partId)
        if (item.partBatches.length > 0) {
          item.partBatches.forEach((j: any, i: any) => {
            let o = {
              partId: j.partId,
              batchId: j.id,
              amount: j.stockAmount,
              stock: j.maxAmount
            }
            obj.detailRequests.push(o)
          })
        } else {
          obj.detailRequests.push({
            partId: item.partId,
            batchId: '',
            amount: '',
            stock: 0
          })
        }
        ruleForm.value.push(obj)
      })
    }
  },
  { deep: true }
)
</script>
<style scoped lang="scss">
.outDialog {
  .box {
    margin-bottom: 24px;

    .row {
      font-size: var(--el-font-size-base);
      margin-bottom: 16px;

      .partName {
        font-weight: 700;
      }
    }
  }
}
</style>
